<!-- 积分 -->
<template>
  <view>
    <view class="container">
      <!-- 顶部余额信息 -->
      <view class="balance-card">
        <view class="balance-title">当前积分</view>
        <view class="balance-amount">¥ {{ ji_fen }}</view>
      </view>

      <!-- 明细列表 -->
      <view class="record-list">
        <view class="section-title">收支明细</view>
        <u-empty
          mode="data"
          text="暂无数据"
          v-if="dataList.length == 0"
          marginTop="35vh"
          :icon="getResource('img/phone/mini/no_data.png')"
        />

        <scroll-view
          class="query_content"
          @scrolltolower="buttonScrolltolower"
          scroll-y="true"
          style="height: calc(100vh - 350rpx)"
          v-else
        >
          <view
            v-for="(item, index) in dataList"
            :key="index"
            class="record-item"
          >
            <view class="record-left">
              <view class="record-type">{{ item.balance_type_2_name }}</view>

              <view class="record-time">{{ item.created_at_show }}</view>
            </view>
            <view
              class="record-right"
              :class="{
                income: item.direction == '+',
                expense: item.direction == '-',
              }"
            >
              {{ item.direction }}{{ item.num }}
            </view>
          </view>
        </scroll-view>

        <!-- <view v-for="(item, index) in records" :key="index" class="record-item">
          <view class="record-left">
            <view class="record-type">{{ item.type }}</view>
            <view class="record-time">{{ formatTime(item.time) }}</view>
          </view>
          <view
            class="record-right"
            :class="{ income: item.amount > 0, expense: item.amount < 0 }"
          >
            {{ item.amount > 0 ? "+" : "" }}{{ item.amount.toFixed(2) }}
          </view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, reactive, toRefs } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getIntegralInfo } from "../../api/userInfo";
const { proxy } = getCurrentInstance();
import { getResource } from "../../utils/Resource";

import { showLoading, showToast } from "../../utils/toast";

onShow(() => {
  init();
});
const data = reactive({
  formData: {
    count: 7,
    page_no: 1,
    page_size: 10,
    page_count: 1,
    balance_type: 2,
  },
  dataList: [],
  ji_fen: "",
  //   Parameters: { balance_type: "2" },
});
const ji_fen = ref("");
const { formData, dataList } = toRefs(data);
const init = async () => {
  return await getIntegralInfo(formData.value).then((res) => {
    console.log(res.data);
    dataList.value = [...dataList.value, ...res.data.list];
    formData.value.balance = res.data.balance;
    formData.value.count = res.data.count;
    formData.value.page_count = res.data.page_count;
    formData.value.page_no = res.data.page_no;
    formData.value.page_size = res.data.page_size;
    ji_fen.value = res.data.ji_fen;
  });
};

// 当前余额
const balance = ref(0);
// 收支记录
const records = ref([
  {
    type: "工资收入",
    amount: 5000,
    time: "2025-07-28 09:00:00",
  },
  {
    type: "购物消费",
    amount: -328.5,
    time: "2025-07-27 15:30:00",
  },
  {
    type: "理财收益",
    amount: 86.2,
    time: "2025-07-25 18:00:00",
  },
  {
    type: "餐饮消费",
    amount: -45.8,
    time: "2025-07-24 12:30:00",
  },
  {
    type: "转账收入",
    amount: 200,
    time: "2025-07-22 10:15:00",
  },
  {
    type: "交通出行",
    amount: -12.5,
    time: "2025-07-20 08:45:00",
  },
]);

// 格式化时间显示
const formatTime = (timeStr) => {
  const date = new Date(timeStr);
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");

  return `${month}月${day}日 ${hours}:${minutes}`;
};

// 模拟加载数据
onMounted(() => {
  // 这里可以替换为实际的API请求
  // fetchBalanceAndRecords()
  // proxy.$http({
  // 	url:''
  // })
});

const buttonScrolltolower = async () => {
  if (formData.value.count != dataList.value.length) {
    formData.value.page_no++;
    showLoading("加载中");
    await init();
  } else {
    showToast("已经最后一页了~");
  }
};
</script>

<style lang="scss" scoped>
:deep(.u-empty) {
  margin: 15vh !important;
}
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.balance-card {
  background: linear-gradient(135deg, #4a6cf7, #2546f0);
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  color: #fff;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(74, 108, 247, 0.2);

  .balance-title {
    font-size: 28rpx;
    margin-bottom: 10rpx;
  }

  .balance-amount {
    font-size: 56rpx;
    font-weight: bold;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 30rpx 0 20rpx 0;
  padding-left: 20rpx;
}

.record-list {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .record-left {
    flex: 1;
  }

  .record-type {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 10rpx;
  }

  .record-time {
    font-size: 24rpx;
    color: #999;
  }

  .record-right {
    font-size: 36rpx;
    font-weight: bold;

    &.income {
      color: #4a6cf7;
    }

    &.expense {
      color: #ff4d4f;
    }
  }
}

.empty-tip {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>
